<template>
    <div class="transfer-history">
        <div class="history-filter">
            <smart-search @reset="resetParams" @search="query(true)">
                <div slot="search" class="filter-left">
                    <div class="query-item">
                        <span class="item-laber">
                            处理人：
                        </span>
                        <a-input
                            class="item-body"
                            v-model="params.processUserName"
                            placeholder="请输入"
                        ></a-input>
                    </div>
                    <div class="query-item">
                        <span class="item-laber">
                            处理时间：
                        </span>
                        <a-range-picker
                            class="item-body date-picker"
                            format="YYYY-MM-DD"
                            :placeholder="['开始时间', '结束时间']"
                            v-model="params.processTime"
                        />
                    </div>
                    <div class="query-item">
                        <span class="item-laber">
                            交接人姓名：
                        </span>
                        <a-input
                            class="item-body"
                            v-model="params.sourceUserName"
                            placeholder="请输入"
                        ></a-input>
                    </div>
                    <div class="query-item">
                        <span class="item-laber">
                            交接类型：
                        </span>
                        <a-select
                            v-model="params.workTransferType"
                            class="item-body"
                            :style="{'--placeholder': '\'请选择\''}"
                            :class="{'show-placeholder': !params.workTransferType}"
                            allowClear
                        >
                            <a-select-option key="onTheJob" value="WORK_ITEM">
                                待办任务
                            </a-select-option>
                            <a-select-option key="pendingHandover" value="BUSINESS_DATA">
                                应用数据
                            </a-select-option>
                            <a-select-option key="resign" value="ROLE">
                                角色
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
            </smart-search>
        </div>
        <div class="history-table">
            <div class="table" :class="!historyTotal ? 'no-data' : ''">
                <a-table
                    class="table-history-list"
                    :columns="historyColumns"
                    :dataSource="transferHistoryData"
                    :scroll="{x: '1085px', y: 'calc(100vh - 278px)'}"
                    :pagination="false"
                    :rowKey="(record) => record.id"
                >
                    <template
                        slot="processUserName"
                        slot-scope="text"
                    >
                        <a-tooltip v-if="text" placement="top">
                            <template slot="title">
                                <span>{{text}}</span>
                            </template>
                            <span>{{text}}</span>
                        </a-tooltip>
                        <span v-else>--</span>
                    </template>
                    <template
                        slot="sourceUserName"
                        slot-scope="text"
                    >
                        <a-tooltip v-if="text" placement="top">
                            <template slot="title">
                                <span>{{text}}</span>
                            </template>
                            <span>{{text}}</span>
                        </a-tooltip>
                        <span v-else>--</span>
                    </template>
                    <template
                        slot="sourceUserDeptName"
                        slot-scope="text"
                    >
                        <a-tooltip v-if="text" placement="top">
                            <template slot="title">
                                <span>{{text}}</span>
                            </template>
                            <span>{{text}}</span>
                        </a-tooltip>
                        <span v-else>--</span>
                    </template>
                    <template
                        slot="workTransferType"
                        slot-scope="text"
                        @click.stop="() => {}"
                    >
                        <span>{{(dataSourceType[text] && dataSourceType[text].label) || '--'}}</span>
                    </template>
                    <template
                        slot="receiveUserName"
                        slot-scope="text"
                    >
                        <a-tooltip v-if="text" placement="top">
                            <template slot="title">
                                <span>{{text}}</span>
                            </template>
                            <span>{{text}}</span>
                        </a-tooltip>
                        <span v-else>--</span>
                    </template>
                    <template
                        slot="receiveUserDeptName"
                        slot-scope="text"
                    >
                        <a-tooltip v-if="text" placement="top">
                            <template slot="title">
                                <span>{{text}}</span>
                            </template>
                            <span>{{text}}</span>
                        </a-tooltip>
                        <span v-else>--</span>
                    </template>
                    <template
                        slot="operation"
                        slot-scope="text, record"
                        @click.stop="() => {}"
                    >
                        <span
                            class="icon aufontAll handoverOpt"
                            @click.self.stop="showModel(record)"
                        >&#xed1c;</span>
                    </template>
                </a-table>
            </div>
            <div class="empty-box" v-show="!historyTotal">
                <div>
                    <img class="user-empty" src="../../assets/images/userEmpty.png" />
                    <div>暂无数据</div>
                </div>
            </div>
            <div v-if="historyTotal" class="footer">
                <a-pagination
                    :current="curPage"
                    :total="historyTotal"
                    :showTotal="(historyTotal) => `共${historyTotal}条`"
                    :pageSize="pageSize"
                    :pageSizeOptions="pageSizeOptions"
                    showSizeChanger
                    showQuickJumper
                    @change="onPaginationChange"
                    @showSizeChange="onSizeChange"
                />
            </div>
        </div>

        <a-drawer
            title="交接详情"
            width="850"
            placement="right"
            @close="onClose"
            :closable="true"
            :visible="visible"
            wrapClassName="transfer-history-drawer"
            :destroyOnClose="true"
        >
            <TransferDetail :recordValue="recordValue"/>
        </a-drawer>
    </div>
</template>
<script lang="ts">
import SmartSearch from '@/components/global/smart-search.vue';
import common from "@cloudpivot/common/pc";
import StaffSelector from '@cloudpivot/form/src/common/components/form-staff-selector/pc/staff-selector.vue';
import {
  DatePicker, Drawer, Input, Pagination, Select, Table
} from "@h3/antd-vue";
import axios from 'axios';
import moment from 'moment';
import { Component, Vue } from "vue-property-decorator";
import TransferDetail from "../../components/organization/taskTransfer/transfer-detail.vue";

@Component({
    name: 'TransferHistory',
    components:{
        RoleSelect: common.components.RoleSelect,
        AInput: Input,
        ATable: Table,
        APagination: Pagination,
        SmartSearch,
        StaffSelector,
        ADrawer: Drawer,
        TransferDetail,
        ARangePicker: DatePicker.RangePicker,
        ASelect: Select,
        ASelectOption: Select.Option,
    },
})
export default class TransferHistory extends Vue{
    historyTotal: number = 0;

    testData = `[{\"id\":\"2c928ff17db7c18f017db87da8c101ee\",\"workTransferType\":\"WORK_ITEM\",\"remarks\":null,\"createdTime\":\"2021-12-14 18:29:43\",\"modifiedTime\":\"2021-12-14 18:30:20\",\"deleted\":false,\"createdBy\":null,\"modifiedBy\":null,\"extend1\":null,\"extend2\":null,\"extend3\":null,\"extend4\":null,\"extend5\":null,\"username\":\"dsjason\",\"departmentId\":\"2c928ff17d32842d017d32ff6ee5007e\",\"name\":\"Dsjason\",\"admin\":true,\"active\":false,\"sortKey\":null,\"managerId\":null,\"gender\":\"OTHER\",\"mobile\":\"15807188590\",\"dingtalkId\":null,\"userId\":\"dsjason\",\"imgUrl\":null,\"imgUrlId\":null,\"status\":\"ENABLE\",\"privacyLevel\":\"ALL_VISIABLE\",\"appellation\":null,\"officePhone\":null,\"email\":null,\"employeeNo\":null,\"employeeRank\":null,\"secretaryId\":null,\"identityNo\":null,\"sourceId\":null,\"birthday\":null,\"entryDate\":null,\"departureDate\":null,\"leader\":false,\"boss\":false,\"enabled\":true,\"unitType\":3,\"dingUserJson\":null,\"pinYin\":\"Dsjason\",\"shortPinYin\":\"Dsjason\",\"corpId\":\"main\",\"position\":null,\"userUnion\":null,\"roleName\":\"主管\",\"manager\":null,\"roleIds\":null,\"isAuthUser\":true,\"deptIds\":null,\"entryTime\":null,\"isImport\":false,\"relatedOrgType\":\"MAIN\",\"relatedSyncType\":\"PUSH\",\"relatedType\":null,\"deptNum\":1,\"agentId\":null,\"pcServerUrl\":null,\"mobileServerUrl\":null,\"userManagerConfigList\":null,\"departmentName\":\"自维护\",\"employeeRole\":1,\"employeeTask\":2,\"employeeData\":3},
                {\"id\":\"2c928ff17db7c18f017dbcb518d40710\",\"workTransferType\":\"BUSINESS_DATA\",\"remarks\":null,\"createdTime\":\"2021-12-15 14:08:45\",\"modifiedTime\":\"2022-01-05 20:45:36\",\"deleted\":false,\"createdBy\":null,\"modifiedBy\":null,\"extend1\":null,\"extend2\":null,\"extend3\":null,\"extend4\":null,\"extend5\":null,\"username\":\"test\",\"departmentId\":\"2c928ff17d32842d017d32ff6ee5007e\",\"name\":\"test\",\"admin\":true,\"active\":false,\"sortKey\":null,\"managerId\":null,\"gender\":\"OTHER\",\"mobile\":\"15807188591\",\"dingtalkId\":null,\"userId\":\"test\",\"imgUrl\":null,\"imgUrlId\":null,\"status\":\"ENABLE\",\"privacyLevel\":\"ALL_VISIABLE\",\"appellation\":null,\"officePhone\":null,\"email\":null,\"employeeNo\":null,\"employeeRank\":null,\"secretaryId\":null,\"identityNo\":null,\"sourceId\":null,\"birthday\":null,\"entryDate\":null,\"departureDate\":null,\"leader\":false,\"boss\":false,\"enabled\":true,\"unitType\":3,\"dingUserJson\":null,\"pinYin\":\"test\",\"shortPinYin\":\"test\",\"corpId\":\"main\",\"position\":null,\"userUnion\":null,\"roleName\":null,\"manager\":null,\"roleIds\":null,\"isAuthUser\":true,\"deptIds\":null,\"entryTime\":null,\"isImport\":false,\"relatedOrgType\":\"MAIN\",\"relatedSyncType\":\"PUSH\",\"relatedType\":null,\"deptNum\":1,\"agentId\":null,\"pcServerUrl\":null,\"mobileServerUrl\":null,\"userManagerConfigList\":null,\"departmentName\":\"自维护\",\"employeeRole\":0,\"employeeTask\":1,\"employeeData\":2},
                {\"id\":\"2c928ff17d7f929f017d7fb6402c0148\",\"workTransferType\":\"ROLE\",\"remarks\":null,\"createdTime\":\"2021-12-03 17:53:10\",\"modifiedTime\":\"2022-01-04 16:37:15\",\"deleted\":false,\"createdBy\":null,\"modifiedBy\":null,\"extend1\":null,\"extend2\":null,\"extend3\":null,\"extend4\":null,\"extend5\":null,\"username\":\"michong\",\"departmentId\":\"2c928ff17d32842d017d32ff6ee5007e\",\"name\":\"michong\",\"admin\":false,\"active\":false,\"sortKey\":null,\"managerId\":\"\",\"gender\":\"OTHER\",\"mobile\":\"13368692771\",\"dingtalkId\":null,\"userId\":\"michong\",\"imgUrl\":\"62a6a1bd8e4e41bba3ba1d4bdbf6a2bb9873571B-163D-484b-B97F-A81A7E0FD593.png\",\"imgUrlId\":\"62a6a1bd8e4e41bba3ba1d4bdbf6a2bb\",\"status\":\"ENABLE\",\"privacyLevel\":\"ALL_VISIABLE\",\"appellation\":null,\"officePhone\":null,\"email\":null,\"employeeNo\":null,\"employeeRank\":null,\"secretaryId\":null,\"identityNo\":null,\"sourceId\":\"\",\"birthday\":null,\"entryDate\":null,\"departureDate\":null,\"leader\":false,\"boss\":false,\"enabled\":true,\"unitType\":3,\"dingUserJson\":null,\"pinYin\":\"michong\",\"shortPinYin\":\"michong\",\"corpId\":\"main\",\"position\":null,\"userUnion\":null,\"roleName\":null,\"manager\":null,\"roleIds\":null,\"isAuthUser\":true,\"deptIds\":null,\"entryTime\":null,\"isImport\":false,\"relatedOrgType\":\"MAIN\",\"relatedSyncType\":\"PUSH\",\"relatedType\":null,\"deptNum\":1,\"agentId\":null,\"pcServerUrl\":null,\"mobileServerUrl\":null,\"userManagerConfigList\":null,\"departmentName\":\"自维护\",\"employeeRole\":0,\"employeeTask\":3,\"employeeData\":2},
                {\"id\":\"2c928ff17e474cf9017e47f23f5f012d\",\"workTransferType\":\"WORK_ITEM\",\"remarks\":null,\"createdTime\":\"2022-01-11 15:02:45\",\"modifiedTime\":\"2022-01-11 15:02:45\",\"deleted\":false,\"createdBy\":null,\"modifiedBy\":null,\"extend1\":null,\"extend2\":null,\"extend3\":null,\"extend4\":null,\"extend5\":null,\"username\":\"putongren2\",\"departmentId\":\"2c928ff17d32842d017d32ff6ee5007e\",\"name\":\"普通人\",\"admin\":false,\"active\":false,\"sortKey\":null,\"managerId\":null,\"gender\":\"OTHER\",\"mobile\":\"13368692776\",\"dingtalkId\":null,\"userId\":\"putongren2\",\"imgUrl\":null,\"imgUrlId\":null,\"status\":\"ENABLE\",\"privacyLevel\":\"ALL_VISIABLE\",\"appellation\":null,\"officePhone\":null,\"email\":null,\"employeeNo\":null,\"employeeRank\":null,\"secretaryId\":null,\"identityNo\":null,\"sourceId\":null,\"birthday\":null,\"entryDate\":null,\"departureDate\":null,\"leader\":false,\"boss\":false,\"enabled\":true,\"unitType\":3,\"dingUserJson\":null,\"pinYin\":\"putongren\",\"shortPinYin\":\"ptr\",\"corpId\":\"main\",\"position\":null,\"userUnion\":null,\"roleName\":\"角色1,角色2,角色3\",\"manager\":null,\"roleIds\":null,\"isAuthUser\":true,\"deptIds\":null,\"entryTime\":null,\"isImport\":false,\"relatedOrgType\":\"MAIN\",\"relatedSyncType\":\"PUSH\",\"relatedType\":null,\"deptNum\":1,\"agentId\":null,\"pcServerUrl\":null,\"mobileServerUrl\":null,\"userManagerConfigList\":null,\"departmentName\":\"自维护\",\"employeeRole\":3,\"employeeTask\":2,\"employeeData\":1},
                {\"id\":\"2c928ff17f29e5af017f2aa462cc0069\",\"workTransferType\":\"BUSINESS_DATA\",\"remarks\":null,\"createdTime\":\"2022-02-24 15:31:31\",\"modifiedTime\":\"2022-02-24 15:31:47\",\"deleted\":false,\"createdBy\":null,\"modifiedBy\":null,\"extend1\":null,\"extend2\":null,\"extend3\":null,\"extend4\":null,\"extend5\":null,\"username\":\"binbin\",\"departmentId\":\"2c928ff17d32842d017d32ff6ee5007e\",\"name\":\"binbin\",\"admin\":true,\"active\":false,\"sortKey\":null,\"managerId\":null,\"gender\":\"OTHER\",\"mobile\":\"13131234567\",\"dingtalkId\":null,\"userId\":\"binbin\",\"imgUrl\":null,\"imgUrlId\":null,\"status\":\"ENABLE\",\"privacyLevel\":\"ALL_VISIABLE\",\"appellation\":null,\"officePhone\":null,\"email\":null,\"employeeNo\":null,\"employeeRank\":null,\"secretaryId\":null,\"identityNo\":null,\"sourceId\":null,\"birthday\":null,\"entryDate\":null,\"departureDate\":null,\"leader\":false,\"boss\":false,\"enabled\":true,\"unitType\":3,\"dingUserJson\":null,\"pinYin\":\"binbin\",\"shortPinYin\":\"binbin\",\"corpId\":\"main\",\"position\":null,\"userUnion\":null,\"roleName\":null,\"manager\":null,\"roleIds\":null,\"isAuthUser\":true,\"deptIds\":null,\"entryTime\":null,\"isImport\":false,\"relatedOrgType\":\"MAIN\",\"relatedSyncType\":\"PUSH\",\"relatedType\":null,\"deptNum\":1,\"agentId\":null,\"pcServerUrl\":null,\"mobileServerUrl\":null,\"userManagerConfigList\":null,\"departmentName\":\"自维护\",\"employeeRole\":0,\"employeeTask\":2,\"employeeData\":3},
                {\"id\":\"2c928ff17dfbb64a017dff3d39b6021e\",\"workTransferType\":\"ROLE\",\"remarks\":null,\"createdTime\":\"2021-12-28 12:12:22\",\"modifiedTime\":\"2021-12-28 12:13:59\",\"deleted\":true,\"createdBy\":null,\"modifiedBy\":null,\"extend1\":null,\"extend2\":null,\"extend3\":null,\"extend4\":null,\"extend5\":null,\"username\":\"xxxxxxx\",\"departmentId\":\"\",\"name\":\"xxxxxx\",\"admin\":false,\"active\":false,\"sortKey\":null,\"managerId\":\"\",\"gender\":\"OTHER\",\"mobile\":\"16699999999\",\"dingtalkId\":null,\"userId\":\"xxxxxxx\",\"imgUrl\":null,\"imgUrlId\":null,\"status\":\"DISABLE\",\"privacyLevel\":\"ALL_VISIABLE\",\"appellation\":null,\"officePhone\":null,\"email\":null,\"employeeNo\":null,\"employeeRank\":null,\"secretaryId\":null,\"identityNo\":null,\"sourceId\":\"\",\"birthday\":null,\"entryDate\":null,\"departureDate\":null,\"leader\":false,\"boss\":false,\"enabled\":true,\"unitType\":3,\"dingUserJson\":null,\"pinYin\":\"xxxxxx\",\"shortPinYin\":\"xxxxxx\",\"corpId\":\"RELEVANCE-67e680c69fae4b0b9f5a53ab685c49e5\",\"position\":null,\"userUnion\":null,\"roleName\":null,\"manager\":null,\"roleIds\":null,\"isAuthUser\":true,\"deptIds\":null,\"entryTime\":null,\"isImport\":false,\"relatedOrgType\":null,\"relatedSyncType\":null,\"relatedType\":null,\"deptNum\":null,\"agentId\":null,\"pcServerUrl\":null,\"mobileServerUrl\":null,\"userManagerConfigList\":null,\"employeeRole\":0,\"employeeTask\":5,\"employeeData\":3},
                {\"id\":\"2c928ff17dfbb64a017dff3e37320222\",\"workTransferType\":\"WORK_ITEM\",\"remarks\":null,\"createdTime\":\"2021-12-28 12:13:27\",\"modifiedTime\":\"2021-12-28 12:13:59\",\"deleted\":true,\"createdBy\":null,\"modifiedBy\":null,\"extend1\":null,\"extend2\":null,\"extend3\":null,\"extend4\":null,\"extend5\":null,\"username\":\"ooooo\",\"departmentId\":\"\",\"name\":\"ooooo\",\"admin\":false,\"active\":false,\"sortKey\":null,\"managerId\":\"\",\"gender\":\"OTHER\",\"mobile\":\"18899999999\",\"dingtalkId\":null,\"userId\":\"ooooo\",\"imgUrl\":null,\"imgUrlId\":null,\"status\":\"DISABLE\",\"privacyLevel\":\"ALL_VISIABLE\",\"appellation\":null,\"officePhone\":null,\"email\":null,\"employeeNo\":null,\"employeeRank\":null,\"secretaryId\":null,\"identityNo\":null,\"sourceId\":\"\",\"birthday\":null,\"entryDate\":null,\"departureDate\":null,\"leader\":false,\"boss\":false,\"enabled\":true,\"unitType\":3,\"dingUserJson\":null,\"pinYin\":\"ooooo\",\"shortPinYin\":\"ooooo\",\"corpId\":\"RELEVANCE-67e680c69fae4b0b9f5a53ab685c49e5\",\"position\":null,\"userUnion\":null,\"roleName\":null,\"manager\":null,\"roleIds\":null,\"isAuthUser\":true,\"deptIds\":null,\"entryTime\":null,\"isImport\":false,\"relatedOrgType\":null,\"relatedSyncType\":null,\"relatedType\":null,\"deptNum\":null,\"agentId\":null,\"pcServerUrl\":null,\"mobileServerUrl\":null,\"userManagerConfigList\":null,\"employeeRole\":0,\"employeeTask\":3,\"employeeData\":3}]`

    historyColumns: any = [
        {
            width: 83,
            dataIndex: "index",
            title: "序号",
        },
        {
            width: 76,
            dataIndex: "processUserName",
            title: "处理人",
            scopedSlots: { customRender: "processUserName" },
        },
        {
            width: 196,
            dataIndex: "processTime",
            title: "处理时间",
            scopedSlots: { customRender: "processTime" },
        },
        {
            width: 105,
            dataIndex: "sourceUserName",
            title: "姓名",
            scopedSlots: { customRender: "sourceUserName" },
        },
        {
            width: 148,
            dataIndex: "sourceUserDeptName",
            title: "部门",
            scopedSlots: { customRender: "sourceUserDeptName" },
        },
        {
            width: 117,
            dataIndex: "workTransferType",
            title: "交接类型",
            scopedSlots: { customRender: "workTransferType" },
        },
        {
            width: 84,
            dataIndex: "transferSize",
            title: "交接数",
            scopedSlots: { customRender: "transferSize" },
        },
        {
            width: 84,
            dataIndex: "receiveUserName",
            title: "接收人",
            scopedSlots: { customRender: "receiveUserName" },
        },
        {
            width: 107,
            dataIndex: "receiveUserDeptName",
            title: "接收人部门",
            scopedSlots: { customRender: "receiveUserDeptName" },
        },
        {
            width: 85,
            dataIndex: "operation",
            align: "right",
            title: "操作",
            scopedSlots: { customRender: "operation" },
        }
    ]

    dataSourceType: any = {
        WORK_ITEM: {
            label: "待办任务",
            val: 1
        },
        BUSINESS_DATA: {
            label: "应用数据",
            val: 2
        },
        ROLE: {
            label: "角色",
            val: 3
        }
    }

    transferHistoryData: any[] = []

    staffSelectorOpts = {
        selectOrg: true,
        selectUser: false,
        showModel: true,
        mulpitle: true,
        showSelect: true,
        placeholder: '请选择'
    }

    keepRolesList: any = [{code: "SYS_2000000"}, {code: "SYS_1000000"}];

    codeProp: string = "code";

    params: any = {
        processUserName: '',
        processTime:[null, null],
        sourceUserName: '',
        workTransferType: '',
    }

    pageSize = 20;

    curPage: number = 1;

    pageSizeOptions: string[] = ["10", "20", "50", "100", "200", "300", "500"];

    get roleParams() {
        // if (this.userType === 1) return {};
        // // 新增人员的时候需要过滤主管角色
        return {roleType: "SYS"};
    }

    mounted(){
        this.query();
        // this.initData();
    }
    selectRole(value: any[]) {
        if (!value || !value.length) {
            this.params.roleIds = [];
        return;
        }
            this.params.roleIds = value.map((role: any) => {
        return role.id;
        });
    }

    resetParams(){
        this.params = {
            userName: '',
            department: [],
            roleIds: [],
        }
        this.query(true);
    }

    async query(query?:boolean){
        console.log(this.params)
        if(query){
            this.curPage = 1;
        }
        const params = {
            processUserName: this.params.processUserName || '',
            processTimeBegin: (this.params.processTime[0] && moment(this.params.processTime[0]).format('YYYY-MM-DD')) || null,
            processTimeEnd: (this.params.processTime[1] && moment(this.params.processTime[1]).format('YYYY-MM-DD')) || (this.params.processTime[0] && moment(this.params.processTime[0]).format('YYYY-MM-DD')) || null,
            sourceUserName: this.params.sourceUserName || '',
            workTransferType: this.params.workTransferType || '',
            pageNumber: this.curPage - 1 || 0,
            pageSize: this.pageSize || 20,
        }
        const res: any = await axios.post("/api/organization/user/transfer/record",params);
        if(res.data && res.errcode === 0){
            this.initData(res.data)
        }else{
            this.$message.error(res.errmsg || res.message)
        }
    }

    initData(resData:any){
        // const resData = JSON.parse(this.testData)
        this.transferHistoryData = [...resData.content]
        this.historyTotal = resData.totalElements
        let itemSize = this.historyTotal > this.pageSize ? this.curPage * this.pageSize > this.historyTotal ? (this.historyTotal - (this.curPage - 1) * this.pageSize) : this.pageSize : this.historyTotal
        console.log(itemSize)
        for(let i=0;i<itemSize;i++){
            this.transferHistoryData[i].index = i + 1 + (this.curPage - 1) * this.pageSize;
        }
    }

    reloadHandoverList() {
        this.query();
    }

    visible: boolean = false
    recordValue: string = ''
    showModel(val: any) {
        this.visible = true;
        this.recordValue = val;
    }

    onClose() {
        this.visible = false;
    }

    onSizeChange(current, size){
        this.curPage = 1;
        this.pageSize = size;
        this.query();
    }

    onPaginationChange(page: number, size: number) {
        this.curPage = page;
        this.query();
    }
}
</script>
<style lang="less" scoped>
.transfer-history{
    height: 100%;
    .history-filter {
        margin-left: -23px;
        /deep/.smart-search{
            >div{
                padding: 0 24px 8px;
                box-shadow: 0px -10px 0px 0px rgb(255 255 255),0px 4px 8px 0px rgba(0, 0, 0, 0.2);
                border-radius: 0px 0px 4px 4px;
                &.collapsed{
                    padding-bottom: 0px;
                    box-shadow: unset;
                    border-radius: unset;
                }
            }
        }
        .filter-left{
            width: 100%;
            .query-item{
                display: flex;
                margin-right: 16px;
                margin-bottom: 16px;
                float: left;
                .item-laber{
                    white-space: nowrap;
                    margin-top: 5px;
                    height: 22px;
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.65);
                    line-height: 22px;
                }
                .item-body{
                    width: 216px;
                    height: 32px;
                    /deep/.h3-organization__label,
                    /deep/.role-selector__input{
                        height: 32px;
                    }
                }
            }
        }
    }
    .history-table {
        padding-right: 24px;
        padding-top: 24px;
        height: calc(100% - 32px);
        display: flex;
        flex-flow: column;
        .table {
            height: calc(100% - 48px);
            &.no-data{
                height: unset;
                margin-top: unset;
            }
            .table-history-list{
                /deep/.ant-table-thead{
                    tr>th{
                        padding: 9px 0;
                        height: 20px;
                        font-size: 14px;
                        font-weight: 600;
                        color: rgba(0, 0, 0, 0.85);
                        line-height: 20px;
                        &:not(:last-child)::after{
                            content: '';
                            border-right: 1px solid #E8E8E8;
                        }
                        >span{
                            width: 100%;
                        }
                        &:first-child>span{
                            padding-left: 24px;
                        }
                        &:last-child>span{
                            padding-right: 24px;
                        }
                        &:not(:first-child)>span{
                            padding-left: 16px;
                        }
                    }
                }
                /deep/.ant-table-tbody{
                    tr>td{
                        padding: 9px 24px;
                        height: 20px;
                        font-size: 14px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, 0.85);
                        line-height: 20px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        &:not(:first-child){
                            padding-left: 16px;
                        }
                        .handoverOpt{
                            font-size: 14px;
                            cursor: pointer;
                        }
                    }
                }
                /deep/.ant-table-placeholder{
                    display: none;
                }
            }
        }
        .empty-box {
            writing-mode: vertical-lr;
            height: 100%;
            > div{
                writing-mode: horizontal-tb;
                text-align: center;
                margin: auto 0px;
                width: 100%;
                .user-empty {
                    margin: 0px auto;
                    // margin-top: 150px;
                }
            }
        }
        .footer {
            height: 48px;
            text-align: right;
            padding: 8px 16px;
        }
    }
    .show-placeholder{
        position: relative;
        &::after{
            content: var(--placeholder);
            font-size: 14px;
            color: #bfbfbf;
            left: 11px;
            top: 5px;
            position: absolute;
        }
    }
}
</style>
<style>
.ant-table-body::-webkit-scrollbar{
    width: 0 !important;
}
</style>